<template>
	<view>
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input class="text-center" @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索" confirm-type="search">
			</view>
		</view>
		<view class="cu-bar bg-white  solid-bottom margin-top solid-bottom justify-around zxNav">
			<view :class="num==0?'action':''" @tap="num=0">
				<text>综合
				<text class="lg cuIcon-triangledownfill"></text>
				</text>
			</view>
			<view :class="num==1?'action':''" @tap="num=1">
				<text>区域<text class="lg cuIcon-triangledownfill"></text></text>
			</view>
			<view :class="num==2?'action':''" @tap="handleInIndex">
				<text>更多<text class="lg cuIcon-triangledownfill"></text></text>
			</view>
		</view>
		<view class="works">
			<view class="marginBtm" v-for="(item,index) in 5" :key=index>
				<view class="flex justify-between works-top padding">
					<view class="flex justify-around title">
						<view><image src="../../static/images/pic5.png"></image></view>
						<text @tap="handleInfo">包图装饰</text>
						<view>券</view>
					</view>
					<view>1.2km</view>
				</view>
				<view class="works-anli">
					<text>案例：</text>
					<text>204</text>
					<text class="padding-left">工地：</text>
					<text>204</text>
				</view>
				<view class="flex works-gz padding">
					<view>先施工后付款</view>
					<view>免息分期</view>
				</view>
				<view class="flex justify-between padding myimg">
					<view><image src="../../static/images/pic45.png"></image></view>
					<view><image src="../../static/images/pic85.png"></image></view>
					<view><image src="../../static/images/pic54.png"></image></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				num:0
			}
		},
		methods:{
			handleInfo(){
				uni.navigateTo({
					url:'/pages/index/renovateDitel'
				})
			},
			handleInIndex(){
				this.num=2
				uni.switchTab({
				    url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style lang="scss">
.zxNav{
	.action{
		color: #398cff;
	}
}
.works{
	background: #f0f2f5;
	.marginBtm{
		margin-bottom: 40upx;
		.works-top{
			width: 100%;
			background: #fff;
			>.title{
				>view:nth-of-type(1){
					width: 50upx;
					height: 50upx;
					border: 1px solid #d8d8d8;
					text-align: center;
					border-radius: 8upx;
					image{
						width: 75%;
						height: 75%;
						position: relative;
						top: 7upx;
					}
				}
				>text{
					padding: 0 15upx;
					font-family: cursive;
					font-weight: bolder;
					font-size: 36upx;
					margin-top: 10upx;
				}
				>view:nth-of-type(2){
					width: 40upx;
					height: 26upx;
					text-align: center;
					font-size: 16upx;
					color: #fff;
					background: #ff6464;
					margin-top: 14upx;
				}
			}
			>view:nth-of-type(2){
				color:#b7b7b7 ;
			}
		}
		.works-anli{
			padding: 20upx;
			color: #b7b7b7;
			background: #fff;
		}
		.works-gz{
			background: #fff;
			font-size: smaller;
			padding: 20upx;
			>view:nth-of-type(1){
				color: #7eb3ff;
				border: 1px solid #7eb3ff;
				padding: 5upx;
				margin-right: 20upx;
			}
			>view:nth-of-type(2){
				color: #ffae5d;
				border: 1px solid #ffae5d;
				padding: 5upx;
			}
		}
		.myimg{
			background: #fff;
			>view{
				width: 32%;
				height: 240upx;
				border-radius: 18upx;
				overflow: hidden;
				>image{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	
}
</style>